<template>
	<view class="page">
		<uni-card>
			<view class="title">
				<view class="left">
					<view class="nameTitle">{{info.studentName}}的请假申请</view>
					<view style="display: flex;align-items: center;color:#8a8a8a;font-size: 14px;">
						<uni-icons type="contact" size="16" color="#80c2ff"></uni-icons>{{info.studentId}}
					</view>
					<view class="status" v-if="info.status==1" style="color: green;">
						{{info.approvalTime}}: 审批通过
					</view>
					<view v-else-if="info.status==0" style="color:deepskyblue;">审批中</view>
					<view v-else-if="info.status==-1" style="color:red;;">
						{{info.approvalTime}}: 审批拒绝</br>审批意见: {{info.approvalOpinion}}
					</view>
				</view>
				<view class="right">
					<uni-icons v-if="info.status==1" type="checkbox" size="75" color="#99cf87"></uni-icons>
					<uni-icons v-else-if="info.status==0" type="minus" size="75" color="#80c2ff"></uni-icons>
					<uni-icons v-else-if="info.status==-1" type="close" size="75" color="#de686a"></uni-icons>
				</view>
			</view>
			<view class="range">
				<view style="margin-left: 15px;">请假{{timeDifference}}天</view>
				<view class="times">
					<uni-icons type="map-pin" size="25" color="#8a8a8a"></uni-icons>
					<view>
						<view style="margin-bottom: 5px;">{{info.startTime}}</view>
						<view>{{info.endTime}}</view>
					</view>
				</view>
				<view class="lessons">
					<view class="ifLesson">
						<view>课程</view>
						<view style="color:deepskyblue;" @click="showClass">{{isShowCla ? '收起' : '展开'}}</view>
					</view>
					<view style="padding: 0 15px;color:#8a8a8a;" v-show="isShowCla">
						<view v-if="list.length==0">请时间段内暂无排课</view>
						<view v-for="(item,index) in list" :key="index">{{item.courseName}}</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view style="color: #8a8a8a;">请假事由</view>
				<view>{{info.leaveReason}}</view>
			</view>
			<view class="list">
				<view style="color: #8a8a8a;font-size: 14px;">附件</view>
				<view v-if="info.fileList.length" style="width: 100%;height: 90px;">
					<image mode="aspectFit" :src="info.fileList[0].url" style="width: 100%;height: 90px;" @click="openPic">
					</image>
				</view>
			</view>
		</uni-card>
		<!-- v-hasPermi="['sc:checkingTask:review'] -->
		<uni-card title="处理意见" v-if="info.status == 0">
			<uni-easyinput type="textarea" v-model="approvalOpinion" placeholder="请输入不通过理由" />
			<view class="button">
				<button type="warn" @click="submit(-1)">不通过</button>
				<button type="primary" @click="submit(1)">通过</button>
			</view>
		</uni-card>
		<uni-popup ref="IMAGE">
			<view>
				<image mode="aspectFit" :src="picUrl"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getLeaveInfoByIdApi,reviewLeaveApi } from '@/common/api/timeleave'
	import { getClaTimeByRangeApi } from '@/common/api/course'
	export default {
		data() {
			return {
				info: {},
				list: [],
				days: 0, // 完整天数
				hours: 0,
				isShowCla: false,
				picUrl: null,
				isPic: false,
				approvalOpinion: ''
			}
		},
		computed: {
		},
		onLoad(option) {
			getLeaveInfoByIdApi(option.id).then(res => {
				console.log(res)
				this.info = res.data
				this.minusDay(this.info)
			})
		},
		methods: {
			minusDay(info) {
				console.log(info.startTime, info.endTime)
				let date1 = new Date(info.startTime)
				let date2 = new Date(info.endTime)
			
				let timeDiff = date2 - date1;
			
				// 计算总天数（不含小时差）
				let totalDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
			
				// 计算剩余小时数
				let remainingTime = timeDiff % (1000 * 60 * 60 * 24);
				let totalHours = remainingTime / (1000 * 60 * 60);
			
				// 保存天数和小时差
				this.days = totalDays;
				this.hours = Math.round(totalHours); // 四舍五入计算小时数
			
				// 根据小时数调整结果
				if (this.hours == 4 || this.hours == 8) {
					this.timeDifference = this.days + 0.5; // 4小时至8小时算作半天
				} else if (this.hours == 12) {
					this.timeDifference = this.days + 1; // 8小时至12小时算作1天
				} else {
					this.timeDifference = this.days; // 其他情况按小时计算
				}
			
				console.log(this.timeDifference)
			},
			showClass() {
				this.isShowCla = !this.isShowCla
			},
			submit(status) {
				reviewLeaveApi({
					leaveId: this.info.leaveId,
					status: status,
					approvalOpinion:this.approvalOpinion
				}).then((reviewRes) => {
					console.log('reviewRes', reviewRes)
					// 返回列表页
					if(reviewRes.data === 'success') {
						uni.navigateBack()
					}
				})
			},
			openPic(picUrl) {
				this.picUrl = picUrl
				this.$refs.IMAGE.open()
			},
		}
	}
</script>

<style lang="less">
	.page {
		.title {
			display: flex;
			justify-content: space-between;
			.nameTitle {
				font-weight: 800;
				margin-bottom: 5px;
			}
			.left {
				.status {
					font-size: 14px;
					
					padding-top:10px;
				}
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.range {
			background-color: #f2f1f6;
			border-radius: 5px;
			padding: 10px 0;
			margin: 2vh 0;
			.times {
				font-size: 12px;
				color:#8a8a8a;
				display: flex;
				align-items: center;
				padding: 5px;
			}
			.lessons {
				margin: 5px 15px;
				background-color: #fff;
				padding:5px;
				border-radius: 5px;
				.ifLesson {
					display: flex;
					justify-content: space-between;
					margin: 0 10px;
				}
			}
		}
		.list {
			margin-bottom: 2vh;
		}
	}

	.button {
		display: flex;
		margin: 15px 0;
		gap: 5px;
		button {
			width: 50%;
		}
	}
</style>